<template>
  <el-dialog
    :visible.sync="isVisible"
    title="紫外参数设置"
    width="780px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="onClose"
  >
    <div class="dialog-container">
      <el-form
        ref="uvForm"
        :model="uvSettings"
        :rules="uvRules"
        label-width="140px"
      >
        <el-form-item label="电晕颜色设置:" prop="crownColor">
          <el-radio-group v-model="uvSettings.crownColor" class="radio-group">
            <el-radio
              v-for="(color, index) in colorOptions"
              :key="index"
              :label="color.id"
            >
              <span
                :style="{
                  backgroundColor: color.value,
                  width: '20px',
                  height: '20px',
                  display: 'inline-block',
                  marginRight: '10px',
                }"
              ></span>
              {{ color.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSave">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateCameraColor } from '@/api/camera';
export default {
  name: 'UvParameterDialog',
  data() {
    return {
      isVisible: false,
      uvSettings: {
        crownColor: '1', // 默认颜色
      },
      uvRules: {
        crownColor: [
          { required: true, message: '请选择电晕颜色', trigger: ['change'] },
        ],
      },
      colorOptions: [
        { label: '红色', value: '#FF0000', id: '1' },
        { label: '白色', value: '#FFFFFF', id: '2' },
        { label: '蓝色', value: '#0000FF', id: '3' },
        { label: '黄色', value: '#FFFF00', id: '4' },
        { label: '青色', value: '#00FFFF', id: '5' },
        { label: '绿色', value: '#00FF00', id: '6' },
        { label: '品红', value: '#FF00FF', id: '7' },
        { label: '玫红', value: '#FF1493', id: '8' },
        { label: '紫色', value: '#800080', id: '9' },
        { label: '灰色', value: '#808080', id: '10' },
        { label: '深绿', value: '#008000', id: '11' },
        { label: '深蓝', value: '#00008B', id: '12' },
      ],
    };
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
    // config配置
    config() {
      return this.$store.getters['websocketClient/config'];
    },
  },
  methods: {
    /**
     * 显示设置对话框
     */
    show() {
      this.isVisible = true;
      this.uvSettings = {
        crownColor: this.currentVideo.color || '1',
      };
    },
    /**
     * 隐藏
     */
    onClose() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.uvForm.resetFields();
    },
    /**
     * 取消
     */
    onCancel() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.uvForm.resetFields();
    },
    /**
     * 保存
     */
    onSave() {
      this.$refs.uvForm.validate(async (valid) => {
        if (!valid) {
          return false;
        } else {
          const param = {
            id: this.currentVideo.id,
            color: this.uvSettings.crownColor,
          };
          const res = await updateCameraColor(param);
          if (res.code === 200) {
            this.$message.success('修改成功');
            this.$emit('on-refresh', this.currentVideo.id);
            this.isVisible = false;
            this.$store.dispatch('websocketClient/sendMessage', {
              ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
              message: {
                cameraId: this.currentVideo.cameraId,
                command: this.config['btnCommand']['uVColor'],
                data: {
                  color: this.uvSettings.crownColor,
                },
              },
            });
          } else {
            this.$message.error('修改失败');
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 20px;
}
.radio-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}
::v-deep .el-radio:last-child {
  margin-right: 30px;
}
</style>
